<template>
    <main>
        <ul class="left">
            <li @click="dianji(index)" v-for="(item,index) in list" :key="index" :class="(xiabiao==index)?'zhuangtai' : '' ">{{item.wenzi}}</li>
        </ul>
        <ul class="right">
            <li v-for="(item,index) in wenben" :key="index" :class="(xiabiao==2)?'xianshi' : 'yincang'">
                <div class="tu"></div>
                <div class="text">
                    <div>{{item.name}}</div>
                    <section>{{item.miaoshu}}</section>
                    <span class="money">¥{{item.money}}</span><button>+</button>
                </div>
            </li>
        </ul>
    </main>
</template>

<script>
export default {
    data(){
        return{
            xiabiao:0,
            list:[
                {wenzi:'热销'},
                {wenzi:'优惠'},
                {wenzi:'分类'},
                {wenzi:'搜索'},
                {wenzi:'打的'},
                {wenzi:'方法'},
                {wenzi:'刚刚'},
                {wenzi:'这种'},
                {wenzi:'谢谢'}
            ],
            wenben:[
                {name:'三文鱼',miaoshu:'三文鱼口感无敌帅呆爆炸吊炸天',money:45},
                {name:'生蚝',miaoshu:'生蚝口感无敌帅呆爆炸吊炸天',money:45},
                {name:'虾',miaoshu:'虾口感无敌帅呆爆炸吊炸天',money:45},
                {name:'回锅肉',miaoshu:'回锅肉口感无敌帅呆爆炸吊炸天',money:45},
            ]
        }
    },
    methods:{
            dianji(index){
                this.xiabiao=index
            }
        }
}
</script>

<style scoped>
main{
    display: flex;
}
main .left{
    margin-left: 15px;
}
main .right{
    margin-top: 30px;
    margin-left: 20px;
    font-size: 14px;
}
main .left li{
    margin-top: 30px;
}
main .right{
    margin-right: 10px;
    flex: 1;
}
main .right li{

    margin-bottom: 15px;
    /* display: none; */
}
main .right li .tu{
    width: 80px;
    height: 80px;
    background-color: aqua;
}
main .right li button{
    margin-left: 200px;
    width: 30px;
}
.zhuangtai{
    color: red;
    font-weight: 700;
}
main .right .xianshi{
    display: flex;
}
main .right .yincang{
    display: none;
}
</style>